import { createRouter, createWebHistory } from 'vue-router'
import NProgress from 'nprogress'
// import { NextLoading } from '/@/utils/loading'
// import 'nprogress/nprogress.css'
import pinia from '/@/stores/index'
// import { storeToRefs } from 'pinia'
import { useKeepALiveNames } from '/@/stores/keep-alive-names'
import { useThemeConfig } from '/@/stores/theme-config'
import { developmentRoutes, errorRoutes } from '/@/router/route'
import { useRoutes } from '../stores/routes'
import { initFrontEndControlRoutes } from './front-end'
import { initBackEndControlRoutes } from './back-end'
import { useTagsViewRoutes } from '/@/stores/tags-view-routes'
import type { RouteRecordRaw } from 'vue-router'

/**
 * 1、前端控制路由时：isRequestRoutes 为 false，需要写 roles，需要走 setFilterRoute 方法。
 * 2、后端控制路由时：isRequestRoutes 为 true，不需要写 roles，不需要走 setFilterRoute 方法），
 * 相关方法已拆解到对应的 `backEnd.ts` 与 `frontEnd.ts`（他们互不影响，不需要同时改 2 个文件）。
 * 特别说明：
 * 1、前端控制：路由菜单由前端去写（无菜单管理界面，有角色管理界面），角色管理中有 roles 属性，需返回到 userInfo 中。
 * 2、后端控制：路由菜单由后端返回（有菜单管理界面、有角色管理界面）
 */

// 读取 `/src/stores/theme-config.ts` 是否开启后端控制路由配置

const { themeConfig } = useThemeConfig(pinia)

const routesStore = useRoutes()

/**
 * 路由多级嵌套数组处理成一维数组
 * @param {*} arr 传入路由菜单数据数组
 * @returns {*} 返回处理后的一维路由菜单数组
 */
export function formatFlatteningRoutes(arr: any) {
  if (arr.length <= 0) {
    return false
  }
  for (let index = 0; index < arr.length; index++) {
    if (arr[index].children) {
      arr = [...arr.slice(0, index + 1), ...arr[index].children, ...arr.slice(index + 1)]
    }
  }
  return arr
}

/**
 * 一维数组处理成多级嵌套数组（只保留二级：也就是二级以上全部处理成只有二级，keep-alive 支持二级缓存）
 * @description isKeepAlive 处理 `name` 值，进行缓存。顶级关闭，全部不缓存
 * @see https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive
 * @param {*} arr 处理后的一维路由菜单数组
 * @returns {*} 返回将一维数组重新处理成 `定义动态路由（dynamicRoutes）` 的格式
 */
export function formatTwoStageRoutes(arr: any) {
  if (arr.length <= 0) {
    return false
  }
  const routesArray: any = []
  const cacheList: Array<string> = []
  for (const v of arr) {
    if (v.path === '/') {
      routesArray.push({
        component: v.component,
        name: v.name,
        path: v.path,
        redirect: v.redirect,
        meta: v.meta,
        children: []
      })
    } else {
      // 判断是否是动态路由（xx/:id/:name），用于 tagsView 等中使用
      // 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
      if (v.path.includes('/:')) {
        v.meta.isDynamic = true
        v.meta.isDynamicPath = v.path
      }
      routesArray[0].children.push({ ...v })
      // 存 name 值，keep-alive 中 include 使用，实现路由的缓存
      // 路径：/@/components/layout/router-view/parent.vue
      if (routesArray[0].meta?.isKeepAlive && v.meta?.isKeepAlive) {
        cacheList.push(v.name)
        const stores = useKeepALiveNames(pinia)
        stores.setCacheKeepAlive(cacheList)
      }
    }
  }
  return routesArray
}

/**
 * 设置路由到 pinia routes 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
 * @description 用于左侧菜单、横向菜单的显示
 * @description 用于 tagsView、菜单搜索中：未过滤隐藏的(isHide)
 * @param routes 路由列表
 */
export async function setFilterMenuAndCacheTagsViewRoutes(
  routes: RouteRecordRaw[]
) {
  const storesRoutesList = useRoutes(pinia)
  storesRoutesList.setRoutes(routes)
  setCacheTagsViewRoutes(routes)
}
/**
 * 缓存多级嵌套数组处理后的一维数组
 * @description 用于 tagsView、菜单搜索中：未过滤隐藏的(isHide)
 * @param routes 路由列表
 */
export function setCacheTagsViewRoutes(routes: RouteRecordRaw[]) {
  const storesTagsView = useTagsViewRoutes(pinia)
  storesTagsView.setTagsViewRoutes(
    formatTwoStageRoutes(formatFlatteningRoutes(routes))[0].children
  )
}

// 路由加载前
const routerBeforeEach = async (to: any, from: any, next: any) => {
  // console.log('routerBeforeEach', to, from)
  // NProgress.configure({ showSpinner: false })
  // if (to.meta.title) {
  //   NProgress.start()
  // }

  // 界面 loading 动画开始执行
  // if (!window.nextLoading) {
  //   NextLoading.start()
  // }

  // 设置网页标题
  const title = to.meta.title ? `${to.meta.title} - ` : ''
  document.title = `${title}${themeConfig.globalTitle}`
  // 设置二级路由
  routesStore.setSecondRoutes(`/${to.path.split('/')[1]}`)
  // 设置面包屑
  routesStore.setBreadcrumbList(to.path)

  next()
}
// 路由加载后
const routerAfterEach = () => {
  NProgress.done()
}
const initRouter = async () => {
  // 后端控制路由：路由数据初始化，防止刷新时丢失
  // 前端控制路由
  const routes = themeConfig.isRequestRoutes ? await initBackEndControlRoutes() : await initFrontEndControlRoutes()

  // 没有路由, 跳转至403
  if (routes[0].children!.length === 0) {
    routes[0].redirect = '/error/403'
  }

  // 开发环境, 增加开发者工具
  if (import.meta.env.VITE_MODE === 'development') {
    routes[0].children!.push(developmentRoutes)
  }
  // debugger
  // 添加动态路由
  await routesStore.setRoutes(routes)

  // 设置路由到 pinia routes 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
  await setFilterMenuAndCacheTagsViewRoutes(routes)

  // 设置路由map
  routesStore.setRouteMap()

  // 设置面包屑数据
  routesStore.setBreadcrumbMap()
  /**
   * 创建一个可以被 Vue 应用程序使用的路由实例
   * @see 参考：https://next.router.vuejs.org/zh/api/#createrouter
   */
  const router = createRouter({
    history: createWebHistory('/'),
    /**
     * 说明：
     * 1、errorRoutes 默认添加 404、401 界面，防止一直提示 No match found for location with path 'xxx'
     * 2、backEnd.ts(后端控制路由)、frontEnd.ts(前端控制路由) 中也需要加 errorRoutes 404、401 界面。
     *    防止 404、401 不在 layout 布局中，不设置的话，404、401 界面将全屏显示
     */
    routes: [...formatTwoStageRoutes(formatFlatteningRoutes(routes)), ...errorRoutes]
  })
  // 跳转前钩子
  router.beforeEach(routerBeforeEach)
  // 跳转后钩子
  router.afterEach(routerAfterEach)
  return router
}
// 导出路由
export default initRouter
